<template>
    <Todoinput @add='addTodo' />
    <Todolist :data='newData' @del='delTodo' @getFlag="handleGetFlag" :allCount="allCount" :completedCound='completedCound' :activeCount='activeCount'/>
</template>
<script setup>
import Todoinput from "./todoinput.vue"
import Todolist from "./todolist.vue"
import { ref, computed } from 'vue'
//功能
//1.列表展示

//2.增加功能

//3.删除功能

//4.选中和未选中

//5.展示数量

//6.永久储存

//声明一组数据
let data = ref([

    {
        id: 1,
        todo: '吃',
        isCompleted: false
    },
    {
        id: 2,
        todo: '看世界杯',
        isCompleted: true
    },

])
//增加todo

let addTodo = (input) => {
    console.log(input);
    //声明一个对象push
    let obj = {
        id: Math.random().toString(32).substring(2),
        todo: input,
        isCompleted: false
    }
    data.value.push(obj)
}
//删除Todo

let delTodo = input => {
    console.log(input);
    data.value.splice(input, 1)
}

//接收筛选的字段

let filterFlag = ref("all")

let handleGetFlag = flag => {
    console.log(flag);
    filterFlag.value = flag
}

//声明三个响应式变量，根据计算属性来进行赋值操作
let allCount = ref(0)
let completedCount = ref(0)
let actionCount = ref(0)
//处理数据
let newData = computed(() => {

    let all = data.value;//全部的数据

    //已完成数据
    let completed = data.value.filter(item => item.isCompleted);

    //未完成数据
    let action = data.value.filter(item => !item.isCompleted)

    //全部数据
    allCount.value = all.length;

    //已完成数据
    completedCount.value = completed.length

    //未完成数据
    actionCount.value = action.length

    switch (filterFlag.value) {
        case 'all':
            return all
        case "completed":
            return completed
        case 'active':
            return action
    }
    return []
})
</script>